<template>
  <div id="index">
    <div class="app-container" id="container">
      <div class="div-moudle">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="协议标题" prop="cmsTitle">
            <el-input class="as" v-model="form.cmsTitle" placeholder="请输入协议标题" />
          </el-form-item>

          <el-form-item label="协议分类" prop="cmsClassCode">
            <el-select v-model="form.cmsClassCode" placeholder="请选择分类" clearable size="small">
              <el-option v-for="dict in cmsClassType" :key="dict.cmsClassCode" :label="dict.cmsClassName"
                :value="dict.cmsClassCode" />
            </el-select>
          </el-form-item>
          <el-form-item label="排序" prop="dataPriority">
            <el-input-number v-model="form.dataPriority" placeholder="请输入排序" controls-position="right" :min="0"
              :max="999999" />
          </el-form-item>

          <el-form-item label="协议Banner" prop="titleImgUrl">
            <imageArraySize :imageStr.sync="form.titleImgUrl" :key="form.titleImgUrl"
              :msg="'图片要求：宽1170px或750px，高428px或27px，大小1M内。'" :limit="5" ref="childs"></imageArraySize>
          </el-form-item>

          <el-form-item label="协议内容" prop="cmsContent">
            <Ueditor :value="form.cmsContent" :config="ueditor.config" ref="ue"></Ueditor>
          </el-form-item>

          <el-form-item label-width="0">
            <div class="dws" align="center">
              <el-button type="primary" @click="submitForm" style="margin-top: 10px;">保存</el-button>
              <el-button @click="colsePro" style="margin-top: 10px;">返回</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    listCmsClass
  } from "@/api/platform/cmsClass"
  import imageArraySize from "@/components/ImageUpload/imageArraySize";
  import Editor from '@/components/Editor';
  import Ueditor from "@/components/UE/ueditor";
  import {
    getCms,
    addCms,
    updateCms,
  } from "@/api/platform/cms";
  export default {
    name: "platformData",
    components: {
      Editor,
      imageArraySize,
      Ueditor
    },
    data() {
      return {
        ueditor: {
          config: {
            initialFrameHeight: 350,
            wordCount: false,
            toolbars: [
              [
                'fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript',
                'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor',
                'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase',
                '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'simpleupload', 'insertimage', 'emotion', 'date', 'time'
              ]
            ]
          }
        },
        statusOptions: [],
        cmsClassType: [],
        queryParam: {
          cmsClassPname: '网站协议'
        },
        form: {
          cmsUid: null,
          cmsType: null,
          cmsTitle: null,
          titleImgUrl: null,
          cmsContent: "",
          cmsLink: null,
          publishTime: null,
          publishUser: null,
          dataPriority: 10,
          dataStatus: "1",
          createUid: null,
          createName: null,
          createTime: null,
          updateUid: null,
          updateName: null,
          updateTime: null,
          recommend: "0",
          titleVideoUrl: null,
          cmsClassCode: null,
          cmsClassPcode: null,
          platformUid: null
        },
        rules: {
          cmsTitle: [{
            required: true,
            message: '标题不能为空',
            trigger: 'blur'
          }],
          cmsClassCode: [{
            required: true,
            message: '分类不能为空',
            trigger: 'blur'
          }]
        },
      }
    },
    created() {

      const cmsUid = this.$route.params && this.$route.params.cmsUid;
      if (cmsUid) {
        getCms(cmsUid).then(response => {
          this.form = response.data;
          if (this.form.cmsContent && this.form.cmsContent != "") {
            //this.$refs.ue.setUEContent(this.form.cmsContent);
          }else{
            //this.$refs.ue.setUEContent("");
          }
        });
      }else{
        this.form.cmsUid=null;
        this.form.cmsType= null;
        this.form.cmsTitle= null;
        this.form.titleImgUrl= null;
        this.form.cmsContent = "";
        this.form.cmsLink = null;
        this.form.publishTime= null;
        this.form.publishUser= null;
        this.form.dataPriority = 10;
        this.form.dataStatus= "1";
        this.form.createUid = null;
        this.form.createName = null;
        this.form.createTime = null;
        this.form.updateUid = null;
        this.form.updateName = null;
        this.form.updateTime = null;
        this.form.recommend = "0";
        this.form.titleVideoUrl = null;
        this.form.cmsClassCode = null;
        this.form.cmsClassPcode = null;
        this.form.platformUid = null;
      }

      this.getDicts("sys_data_status").then(response => {
        this.statusOptions = response.data;
      });
      listCmsClass(this.queryParam).then(response => {
        this.cmsClassType = response.data;
      })

    },
    methods: {
      submitForm() {
        //this.$refs.child.selectImg();
        this.$refs.childs.selectImgs();
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.cmsContent = this.$refs.ue.getUEContent();
            if (this.form.cmsUid != null) {
              updateCms(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.colsePro();
              });
            } else {
              this.form.cmsType = "platforminfo";
              if (this.form.cmsClassCode) {
                this.form.cmsClassPcode = "pingtaixinxi"
              }
              addCms(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.colsePro();
              });
            }
          }
        });
      },
      colsePro() {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({
          path: "/platform/cms/platform",
          query: {
            t: Date.now()
          }
        });
      }
    }
  }
</script>

<style scoped="scoped">
  .app-container {
    background-color: #F7F8FA;
    padding: 20px;
  }

  .div-moudle {
    background-color: #fff;
    position: relative;
    padding: 50px 30px 30px;
    border: 1px solid #ebebeb;
    -moz-border-radius: 4px;
    border-radius: 10px;
    width: 1200px;
    margin: 0 auto;
  }

  .dws {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 58px;
  }
</style>
